<template>
	<view class="wrap">
		<u-navbar :title="$t('dlssq')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }">
			<view class="navbar_link" slot="right" @tap="toPage('/pages/User/Agent/derails/derails')">
				{{$t('ktjl')}}
			</view>
		</u-navbar>
		<view class="list">
			<view class="Agent_tips">
				<view class="Agent_tips_title">
					<view class="left">
						<image class="img" v-if="currentUserLevel =='普通用户'" src="/static/vip.png"></image>
						<image class="img" v-if="currentUserLevel =='普通会员'" src="/static/vip.png"></image>
						<image class="img" v-if="currentUserLevel =='二级代理'" src="/static/vip2.png"></image>
						<image class="img" v-if="currentUserLevel =='一级代理'" src="/static/vip3.png"></image>
						<image class="img" v-if="currentUserLevel =='合伙人'" src="/static/vip4.png"></image>
						<view class="left_text">{{currentUserLevel}}</view>
						<text class="left_tips">{{$t('dqjb')}}</text>
					</view>
					<view class="right">
						<u-icon name="wenhao" custom-prefix="custom-icon" size="30"></u-icon>
						<text class="text">{{$t('ktxz')}}</text>
					</view>
				</view>
				<view class="Agent_tips_rich"><rich-text :nodes="levelInfo[levelInfo_index].description"></rich-text></view>
				
			</view>
			<view class="Agent_Title">
				{{$t('hyzxqy')}}
			</view>
			<view class="Agent_Opening">
				<view class="Agent_top">
					<view class="item">
						<view class="left">{{$t('dlsxz')}}：</view>
						<view class="right" @tap="Agent_picker()">
							{{levelInfo[levelInfo_index].name}}
							<u-icon name="you" custom-prefix="custom-icon" size="20"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="left">{{$t('ktfs')}}：</view>
						<view class="right">
							<view class="right_item" @tap="Agent_tab(0)" :class="{'active':Agent_tab_index == 0}">{{$t('usdtzf')}}</view>
							<view class="right_item" @tap="Agent_tab(1)" :class="{'active':Agent_tab_index == 1}">{{$t('dhmdh')}}</view>
						</view>
					</view>
					<view class="item" v-if="Agent_tab_index == 0" style="height: 70rpx;">
						<view class="left">{{$t('xzfje')}}：</view>
						<view class="right" style="color: #0032B7;">{{levelInfo[levelInfo_index].conditionValue}}USDT</view>
					</view>
					<view class="item" v-else >
						<view class="left">{{$t('dhm')}}：</view>
						<view class="right"><input class="right_input" v-model="value" :placeholder="$t('qsrdhm')" placeholder-style="color:#fff;"/></view>
					</view>
				</view>
			</view>
			<view class="success_btn" @tap="btn_ok">
				{{$t('ljkt')}}
			</view>
			<view class="Agent_list">
				<view class="Agent_cell">
					<view class="left">{{$t('wddhm')}}</view>
					<view class="right" v-if="exchangeInfo.length">
						<text class="text">{{$t('ckjm')}}</text>
						<view class="switch_diy">
							<u-switch v-model="checked" size="40" active-color="#0032B7" ></u-switch>
							<view class="diy" @tap="switch_info"></view>
						</view>
					</view>
				</view>
				<view class="Agent_item" v-for="(item,index) in exchangeInfo" :key="index">
					<view class="left">
						<view class="left_title">
							<text>{{item.create_date}}</text>
							<text v-if="item.sts == '已使用'" class="left_title_tips">{{item.sts}}</text>
							<text v-else class="text">{{item.sts}}</text>
						</view>
						<view class="red" v-if="checked" @tap="copy(item.exchangeCode)">{{item.exchangeCode}}</view>
						<view class="red" v-else>**************</view>
					</view>
					<view class="right">
						{{item.levelName}}
					</view>
				</view>
				<NoData v-if="exchangeInfo.length == 0"></NoData>
			</view>
		</view>
		<u-picker v-model="Agent_show" mode="selector" @confirm="picker_confirm" :range="levelInfo" range-key="name"></u-picker>
		<tom-pwd v-if="showPwd" @cancel="showPwd = false" @confirm="confirm"></tom-pwd>
		<tom-pwd v-if="showPwd2" @cancel="showPwd2 = false,checked = false" @confirm="confirm2"></tom-pwd>
	</view>
</template>
<script>
	import NoData from '@/components/NoData.vue';
	export default {
		data() {
			return {
				checked:false,
				Agent_tab_index:0,
				value:'',
				exchangeInfo:[],
				levelInfo:[{name:''}],
				levelInfo_index:0,
				currentUserLevel:'',
				Agent_show:false,
				showPwd:false,
				showPwd2:false,
				loading:false,
			}
		},
		onShow() {
			this.indexData();
		},
		methods: {
			indexData(){
				uni.showLoading({
					mask: true,
					title: this.$t('loading.title')
				});
				this.$api.userApi.getLevelInf().then(res => {
					this.exchangeInfo = res.data.exchangeInfo;
					this.levelInfo = res.data.levelInfo;
					this.currentUserLevel = res.data.currentUserLevel;
					uni.hideLoading();
				}).catch(res =>{
					uni.hideLoading();
				})
			},
			toPage(link){
				uni.navigateTo({
					url: link
				});
			},
			switch_info(e){
				if(this.checked){
					this.checked = false;
				}else{
					this.showPwd2 = true;
				}
			},
			Agent_tab(index){
				this.Agent_tab_index = index;
			},
			Agent_picker(){
				this.Agent_show = true;
			},
			picker_confirm(e){
				this.levelInfo_index = e[0];
			},
			btn_ok(){
				if(this.Agent_tab_index == 0){
					this.showPwd = true;
				}else{
					// console.log(Number(this.value))
					if(this.value == '') return this.$utils.toast(this.$t('qsrdhm'));
					uni.showLoading({
						mask: true,
						title: this.$t('loading.title')
					});
					this.$api.userApi.exchangeUserLevel({
						exchangeCode:this.value
					}).then(res => {
						this.$utils.toast(this.$t('dhcg'));
						this.indexData();
						uni.hideLoading();
					}).catch(res =>{
						uni.hideLoading();
					})
				}
			},
			confirm(e){
				this.showPwd = false;
				uni.showLoading({
					mask: true,
					title: this.$t('loading.title')
				});
				this.$api.userApi.buyLevel({
					levelCode:this.levelInfo[this.levelInfo_index].code,
					transactionPassword:e
				}).then(res => {
					this.$utils.toast(this.$t('dhcg'));
					this.indexData();
					uni.hideLoading();
				}).catch(res =>{
					uni.hideLoading();
				})
			},
			confirm2(e){
				this.showPwd2 = false;
				uni.showLoading({
					mask: true,
					title: this.$t('loading.title')
				});
				this.$api.loginApi.verificationTransferPassword({
					transferPassword:e
				}).then(res => {
					this.checked = true;
					uni.hideLoading();
				}).catch(res =>{
					uni.hideLoading();
				})
			},
			copy(val){
				this.$utils.copy(val)
			},
			
		},
		components:{
			NoData
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	background: #fff;
	overflow: auto;
}
.list {
	background-image: url('/static/Agentbg.png');
	background-repeat: no-repeat;
	background-position: top left;
	background-size:100% 360rpx;
	.Agent_tips{
		// background: $tom-page-bg-king;
		margin: 70rpx $nr-padd 150rpx $nr-padd ;
		border-radius: 30rpx;
		color: #fff;
		padding: 30rpx;
		.Agent_tips_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				.img{
					width: 35rpx;height: 41rpx;
					margin-right: 10rpx;
				}
				.left_text{
					font-size: 30rpx;
					font-weight: bold;
				}
				.left_tips{
					font-size: 9rpx;
					border: 2rpx solid #fff;
					padding: 2rpx 6rpx;
					border-radius: 4rpx;
					margin-left: 10rpx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				.text{
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
		.Agent_tips_rich{
			font-size: 24rpx;
			margin: 20rpx 0rpx 0rpx;
		}
		.Agent_tips_iconlist{
			display: flex;
			justify-content: space-around;
			.item{
				text-align: center;
				.img{
					width: 88rpx;height: 88rpx;
					margin-bottom: 14rpx;
				}
				.text{
					font-size: 24rpx;
					display: block;
				}
			}
		}
	}
	.Agent_Title{
		font-size: 36rpx;
		font-weight: bold;
		padding:20rpx $nr-padd;
	}
	.Agent_Opening{
		border-radius: 20rpx;
		margin: 20rpx $nr-padd 50rpx $nr-padd;
		color: #fff;
		text-align: center;
		padding: 0rpx 50rpx;
		background-image: url('/static/Agentminbg.png');
		background-size: 100% 100%;
		.Agent_top{
			color: $tom-text-color;
			display: inline-block;
			margin: 20rpx 0rpx;
			.item{
				display: flex;
				align-items: center;
				padding: 10rpx 0rpx;
				.left{
					font-size: 28rpx;
				}
				.right{
					display: flex;
					align-items: center;
					.u-icon{
						transform: rotate(90deg);
						margin-left: 10rpx;
					}
					.right_item{
						width: 150rpx;height: 50rpx;
						line-height: 48rpx;
						border-radius:10rpx;
						font-size: 24rpx;
						text-align: center;
						margin-right: 30rpx;
						background-color: #fff;
						color: $text-color;
					}
					.active{
						background:$text-color;
						color: #fff;
					}
					.right_input{
						color: #fff !important;
						border: #fff 2rpx solid;
						text-align: left;
						font-size: 24rpx;
						border-radius: 8rpx;
						padding: 6rpx 20rpx;
					}
				}
			}
		}
	}
	.success_btn{
			width: 150rpx;height: 60rpx;
			background-color: $text-color;
			border-radius:10rpx;
			color: #fff;
			line-height: 58rpx;
			text-align: center;
			font-weight: bold;
			margin: 40rpx auto;
		}
	.Agent_list{
		background-color:rgba(51, 51, 102, 0.1) ;
		margin: 10rpx $nr-padd  40rpx $nr-padd;
		border-radius: 20rpx;
	}
	.Agent_cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx $nr-padd;
		font-size: 28rpx;
		.left{
			color: $tom-text-color;
			font-weight: bold;
			font-size: 32rpx;
		}
		.right{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text{
				position: relative;
				top: -6rpx;
				color: $tom-text-color;
			}
		}
	}
	.Agent_item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		border-top: 2rpx solid $tom-text-sub-color3;
		border-bottom: 2rpx solid $tom-text-sub-color3;
		.left{
			border-right: 2rpx solid $tom-text-sub-color3;
			width: 100%;
			padding: 20rpx $nr-padd;
			font-size: 24rpx;
			box-sizing: border-box;
			.left_title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $tom-text-sub-color;
				.left_title_tips{
					color: $text-color;
				}
			}
			.red{
				color: $tom-text-color;
				margin-top: 16rpx;
				max-width: 440rpx;
				overflow: hidden; /*自动隐藏文字*/
				text-overflow: ellipsis;/*文字隐藏后添加省略号*/
				white-space: nowrap;/*强制不换行*/
			}
		}
		.right{
			min-width: 200rpx;
			font-size: 28rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $tom-text-color;
		}
	}
}
.navbar_link{
	color: #fff;
	font-size: 28rpx;
	margin-right: 36rpx;
}
.switch_diy{
	margin-left: 20rpx;
	position: relative;
	.diy{
		position: absolute;
		width: 100%;height: 100%;
		background-color: red;
		top: 0;
		z-index: 2;
		opacity: 0;
	}
}
</style>
